<template>
  <div>
    <el-form-item
      v-for="item in buttonList"
      :key="item.clickInfo"
    >
      <el-button
        class="width-full"
        @click="$emit(item.clickInfo)"
        :type="item.type"
      >{{ item.text }}</el-button>
    </el-form-item>
    <el-form-item class="last-child">
      <span>{{ renderMap[formType].title }}</span>
      <router-link :to="renderMap[formType].url">
        {{ renderMap[formType].text }}
      </router-link>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'FormBottom',
  props: {
    formType: {
      type: String,
      default: 'login'
    }
  },
  data() {
    return {
      renderMap: {
        login: {
          title: '还没有账号？',
          url: '/register',
          text: '点我注册！'
        },
        register: {
          title: '已有账号？',
          url: '/login',
          text: '点我登录！'
        }
      },
      buttonList: [
        {
          clickInfo: 'submitForm',
          type: 'primary',
          text: '提交'
        },
        {
          clickInfo: 'resetForm',
          type: '',
          text: '重置'
        }
      ]
    };
  }
};
</script>

<style scoped>
.width-full {
  width: 100%;
}
.last-child {
  margin-bottom: 10px;
}
</style>
